<template>
	<view class="home">
		<view class="aboutUs">
			<text style="color: orange;">BOSS直拒小组成员</text>
			<uni-table stripe emptyText="暂无更多数据">

				<uni-tr v-for="item in team" style="color: white;">
					<uni-th>{{item.name}}</uni-th>
					<uni-td>{{item.work}}</uni-td>
				</uni-tr>

			</uni-table>
		</view>
		<view class="box">
			<view v-for="(item, index) in liParams" :key="item.index">
				<view class="package"
					:style="{ left: item.left, animationDuration: item.durTime, webkitAnimationDuration: item.durTime}"
					:data-index="index" v-if="item.isShow">
					<view class="package_rotate" :style="{fontSize:item.width}">✦</view>
					<!-- <image src="/static/liuxing.png" mode="" class="package_rotate" :style="{width:item.width,height:item.width}"></image> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		canvasContext: null,
		data() {
			return {
				liParams: [],
				timer: null,
				index: 0,
				openRemove: false,
				team: []
			}
		},
		onLoad() {
			this.startRedPacket();
			uni.setNavigationBarColor({
				frontColor: "#000000",
				backgroundColor: '#00b4b3'
			});
			this.team = this.$store.state.team
		},
		methods: {
			startRedPacket() {
				this.index++
				let win = 0
				// 获取屏幕宽度
				uni.getSystemInfo({
					success: function(res) {
						win = res.windowWidth
					}
				});
				let rotate = (parseInt(Math.random() * 90 - 45)) + "deg" // 旋转角度
				let w = (Math.random() * 60) + 10
				let durTime = parseInt(Math.random() * 1.5) + 2.5 // 时间
				let left = parseInt(Math.random() * win)
				if (left < 0) {
					left = 0
				} else if (left > (win - w)) {
					left = (win + 65)
				}
				this.liParams.push({
					left: (left * 1.8) + 'rpx',
					width: w + 'rpx',
					transforms: 'rotate(' + rotate + ')',
					durTime: durTime + 's',
					status: 0,
					index: this.index,
					isShow:true
				})
				/* 清空数组 */
				if (this.liParams.length > 200) {
					this.liParams.length = 0
				}
				if (this.liParams.length > 25) {
					for (let i = (this.liParams.length - 15); i >= 0; i--) {
						this.liParams[i].isShow = false
					}
				}
				// 密度
				this.timer = setTimeout(() => {
					this.startRedPacket()
				}, 300)
			}
		}
	}
</script>

<style lang="scss">

	.home {
		// background: gainsboro;
		// background-color: #fff;
		background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
		height: 92vh;
		width: 100vw;
	}

	.aboutUs {
		text-align: center;
		padding-top: 10vh;
		font-size: 56rpx;

		uni-table {
			display: flex;
			flex-direction: row;
			width: 100vw;
			height: 40vh;
			justify-content: center;
			align-items: center;
			font-size: 38rpx;

			uni-tr {
				padding: 20rpx;

				uni-td {
					padding-top: 40rpx;
					float: left;
					width: 100%;
				}
			}


		}
	}
	.package {
		position: fixed;
		top: -200rpx;
		z-index: 3;
		animation: aim_move 5s linear 1 forwards;
	}
	@keyframes aim_move {
		0% {
			transform: translateY(0);
		}
	
		100% {
			transform: translateY(120vh);
		}
	}
	.package_rotate{
		color: #D9D919;
		animation: aim_rotate 1s linear infinite;
	}
	@keyframes aim_rotate {
		0% {
			transform: rotate(0);
		}
	
		100% {
			transform: rotate(360deg);
		}
	}
</style>
